<%--
  Created by IntelliJ IDEA.
  User: houxianghua
  Date: 2015/9/18
  Time: 11:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>个人档案</title>
  <%@include file="/WEB-INF/jsp/component/commonHead.jsp" %>
  <%@include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
  <!-- bootstrapValidator验证 -->
  <link href="${assets}/bootstrapValidator/css/bootstrapValidator.css" rel="stylesheet"/>
</head>
<body>
<div class="row">
  <form id="myForm" class="form-horizontal" method="post" >
    <input type="hidden" name="user.id" value="${user.id}">
    <input type="hidden" name="doctor.id" value="${doctor.id}">
    <div class="col-lg-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          用户信息
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-lg-12">
              <div class="form-group">
                <label for="username" class="col-sm-2 control-label">登录帐号</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" id="username" name="user.username" value="${user.username}"
                         placeholder="请输入登录帐号">
                </div>
                <label for="mobile" class="col-sm-2 control-label">手机号</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" id="mobile" name="user.mobile" value="${user.mobile}"
                         placeholder="请输入手机号">
                </div>
              </div>
              <div class="form-group">
                <label for="email" class="col-sm-2 control-label">邮箱地址</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" id="email" name="user.email" value="${user.email}"
                         placeholder="请输入邮箱地址">
                </div>
              </div>
              <div class="form-group">
                <label for="realName" class="col-sm-2 control-label">真实姓名</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" id="realName" name="user.realName" value="${user.realName}"
                         placeholder="请输入真实姓名">
                </div>
                <label for="userKind" class="col-sm-2 control-label">用户类型</label>
                <div class="col-sm-4">
                  <select id="userKind" name="user.userKind" class="form-control">
                    <option value="1" <c:if test="${user.userKind==1}">selected="selected"</c:if> >患者</option>
                    <option value="2" <c:if test="${user.userKind==2}">selected="selected"</c:if> >医生</option>
                    <option value="3" <c:if test="${user.userKind==3}">selected="selected"</c:if> >美康用户</option>
                    <option value="4" <c:if test="${user.userKind==4}">selected="selected"</c:if> >政府人员</option>
                  </select>
                </div>
              </div>
            </div>
            <!-- /.col-lg-6 (nested) -->
          </div>
          <!-- /.row (nested) -->
        </div>
      </div>
      <!-- /.panel -->
      <div id="doctorDiv" class="panel panel-default" style="display: none">
        <div class="panel panel-default">
          <div class="panel-heading">
            医生信息
          </div>
          <!-- /.panel-body -->
          <div class="panel-body">
            <div class="row">
              <div class="col-lg-12">
                <input type="hidden" id="drName" name="doctor.drName" value="${doctor.drName}" />
                <div class="form-group">
                  <label for="mkDrCode" class="col-sm-2 control-label">美康医生编号</label>
                  <div class="col-sm-4">
                    <input type="text" class="form-control" id="mkDrCode" name="doctor.mkDrCode" value="${doctor.mkDrCode}"
                           placeholder="请输入美康医生编号">
                  </div>
                  <label for="drCode" class="col-sm-2 control-label">医生从医编号</label>
                  <div class="col-sm-4">
                    <input type="text" class="form-control" id="drCode" name="doctor.drCode" value="${doctor.drCode}"
                           placeholder="请输入医生从医编号">
                  </div>
                </div>
                <div class="form-group">
                  <label for="position" class="col-sm-2 control-label">职务</label>
                  <div class="col-sm-4">
                    <input type="text" class="form-control" id="position" name="doctor.position" value="${doctor.position}"
                           placeholder="请输入职务">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /.panel -->
        <div class="panel panel-default">
          <div class="panel-heading">
            医院信息
          </div>
          <!-- /.panel-body -->
          <div class="panel-body">
            <div class="row">
              <div class="col-lg-12" id="hospDiv">
                <div class="form-group">
                  <div class="col-sm-2">
                    <input type="button" class="btn btn-outline btn-success" id="addHospitalButt" value="添加医院" />
                  </div>
                </div>
                <c:forEach items="${hostVoList}" var="hostVo">
                  <div>
                    <div class="form-group">
                      <input type="hidden" name="hospId" value="${hostVo.hospital.id}"/>
                      <label class="col-sm-3">${hostVo.hospital.hospName}</label>
                      <c:forEach items="${hospLvlList}" var="level">
                        <c:if test="${level.code==hostVo.hospital.hosLevel}">
                          <label class="col-sm-2">${level.name}</label>
                        </c:if>
                      </c:forEach>
                      <label class="col-sm-6">${hostVo.hospital.hospAddress}</label>
                      <div class="col-sm-1"><input type="button" class="btn btn-outline btn-success" value="删除" onclick="removeHosp(this)" /></div>
                    </div>
                    <div class="form-group">
                      <c:forEach items="${hostVo.departmentList}" var="departmentVo">
                        <label class="col-sm-3">
                          <label class="checkbox-inline">
                            <input type="checkbox" <c:if test='${departmentVo.flag}'>checked="checked"</c:if> name="hospId_officeCode" value="${hostVo.hospital.id}_${departmentVo.id}" onchange="checkDepartment(this)" >${departmentVo.showName}
                          </label>
                        </label>
                      </c:forEach>
                    </div>
                  </div>
                </c:forEach>
              </div>
            </div>
          </div>
        </div>
        <!-- /.panel -->
      </div>
      <!-- /.col-lg-12 -->
      <div id="govDiv" class="panel panel-default" style="display: none">
        <div class="panel panel-default">
          <div class="panel-heading">
            政府人员信息
          </div>
          <!-- /.panel-body -->
          <div class="panel-body">
            <div class="row">
              <input type="hidden" name="gp.id" value="${gp.id}" />
              <input type="hidden" id="govPersonnelName" name="gp.realName" value="${gp.realName}" />
              <div class="col-lg-12">
                <div class="form-group">
                  <label for="contactPhone" class="col-sm-2 control-label">联系电话</label>
                  <div class="col-sm-4">
                    <input type="text" class="form-control" id="contactPhone" name="gp.contactPhone" value="${gp.contactPhone}"
                           placeholder="请输入联系电话">
                  </div>
                  <label for="gp_position" class="col-sm-2 control-label">职务</label>
                  <div class="col-sm-4">
                    <input type="text" class="form-control" id="gp_position" name="gp.position" value="${gp.position}"
                           placeholder="请输入职务">
                  </div>
                </div>
                <div class="form-group">
                  <label for="govId" class="col-sm-2 control-label">所属政府</label>
                  <div class="col-sm-4">
                    <select id="govId" name="gp.govId" class="form-control">
                      <option value="">请选择...</option>
                      <c:forEach items="${govList}" var="gov">
                        <option value="${gov.id}" <c:if test="${gov.id==gp.govId}">selected="selected"</c:if> >${gov.govName}</option>
                      </c:forEach>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /.panel -->
      </div>
      <!-- /.col-lg-12 -->
    </div>
    <div class="modal-footer" style="text-align: center ">
      <button type="submit" class="btn btn-primary">保存</button>
    </div>
  </form>
</div>
<!-- /.row -->

<!-- 新增 -->
<div class="modal fade" id="addRelateModal">
  <div class="modal-dialog" >
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
        <h4 class="modal-title">新增医院关联</h4>
      </div>
      <div class="modal-body">
        <iframe id="addRelateIframe" width="100%" height="100%" frameborder="0" ></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="submit_add_relate">保存</button>
      </div>
    </div>
  </div>
</div>

<!-- bootstrapValidator验证 -->
<script src="${assets}/bootstrapValidator/js/bootstrapValidator.js"></script>
<!-- bootstrapValidator验证 国际化中文 -->
<script src="${assets}/bootstrapValidator/js/language/zh_CN.js"></script>

<script type="text/javascript">
  $(function () {
    //判断该用户的用户类型是否为医生，是则显示doctorDiv
    <c:if test="${user.userKind==2}">
    $("#doctorDiv").show();
    </c:if>
    //判断该用户的用户类型是否为政府人员，是则显示govDiv
    <c:if test="${user.userKind==4}">
    $("#govDiv").show();
    </c:if>

    /**
     * 将用户真实姓名 输入到医生姓名
     * */
    $("#realName").change(function(){
      $("#drName").val(this.value);
      $("#govPersonnelName").val(this.value);
    });

    /**
     * 将用户手机号 输入到政府人员联系电话上
     * */
    $("#mobile").change(function(){
      if($("#contactPhone").val()==""){
        $("#contactPhone").val(this.value);
      }
    });

    /**
     * 判断用户类型是否为医生，是医生的话，显示医生要录入的信息div
     * */
    $("#userKind").change(function(){
      if(this.value=="2"){
        $("#doctorDiv").show();
      } else {
        $("#doctorDiv").hide();
        $("#myForm button[type=submit]").prop('disabled',false);
      }
      if(this.value=="4"){
        $("#govDiv").show();
      } else {
        $("#govDiv").hide();
        $("#myForm button[type=submit]").prop('disabled',false);
      }
    });
    /**
     * 添加医院弹出框
     * */
    $("#addHospitalButt").click(function(){
      $("#addRelateIframe").attr("src", "${URL_ADM_HOSP_TORELATE}");//新增医院关联地址
      $('#addRelateModal').modal({ show: true, backdrop: 'static' });

      var width = 800;
      var height = 800;
      var mycss={"width":width+"px","height":height+"px","top":(($(window).height()-height)/2>0?($(window).height()-height)/2:0)+"px"};
      $('#addRelateModal .modal-dialog').css(mycss).find('.modal-content').css({height: '100%',width: '100%'}).find('.modal-body').css({height: '80%' });
    });

    /**
     * 医院弹出框确定按钮
     * */
    $("#submit_add_relate").click(function(){
      document.getElementById('addRelateIframe').contentWindow.addRelate();
    });

    $('#myForm').bootstrapValidator({
      message: 'This value is not valid',
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        "user.username": {
          group: '.col-sm-4',
          validators: {
//                            notEmpty: true,
            regexp : {
              regexp : /^[a-zA-Z][a-zA-Z0-9_]*$/,
              message: "输入格式错误，请以英文开头,并且只能含有英文、数字和下划线"
            },
            remote: {
              type: "post",
              delay: 500,
              url: '${ctx}/user/validateUsername',
              data: function (validator) {
                return {
                  username: validator.getFieldElements('user.username').val(),
                  exception: '${user.username}'
                };
              },
              message: '该帐号已存在'
            }
          }
        },
        "user.mobile": {
          group: '.col-sm-4',
          validators: {
            notEmpty: true,
            digits: true,
            remote: {
              type: "post",
              delay: 500,
              url: '${ctx}/user/validateMobile',
              data: function (validator) {
                return {
                  mobile: validator.getFieldElements('user.mobile').val(),
                  exception: '${user.mobile}'
                };
              },
              message: '该手机号码已存在'
            }
          }
        },
        "user.email": {
          group: '.col-sm-4',
          validators: {
//                            notEmpty: true,
            emailAddress: true,
            remote: {
              type: "post",
              delay: 500,
              url: '${ctx}/user/validateEmail',
              data: function (validator) {
                return {
                  email: validator.getFieldElements('user.email').val(),
                  exception: '${user.email}'
                };
              },
              message: '该邮箱已存在'
            }
          }
        },
        "user.password": {
          group: '.col-sm-4',
          validators: {
            notEmpty: true,
            stringLength:{
              max:20,
              min:6
            }
          }
        },
        "user.realName": {
          group: '.col-sm-4',
          validators: {
            notEmpty: true
          }
        },
      }
    }).on('success.form.bv', function (e) {
      e.preventDefault();
      $.ajax({
        url:'${URL_ADM_USER_UPDATE}',
        type:'post',
        data:$('#myForm').serialize(),
        async : false, //默认为true 异步
        error:function(){
          alert('error');
        },
        success:function(data){
          window.location.href='${URL_HOME_MYSELF}';
        }
      });
    });

  });

  /**
   * 在当前页面添加医院信息
   * */
  function addHospDiv(id,hospName,levelName,hospAddress){
    var hospHtml = ""
                    + '<div class="form-group">'
                    + '<input type="hidden" name="hospId" value="'+id+'"/>'
                    + '<label class="col-sm-3">'+hospName+'</label>'
                    + '<label class="col-sm-2">'+levelName+'</label>'
                    + '<label class="col-sm-6">'+hospAddress+'</label>'
                    + '<div class="col-sm-1"><input type="button" class="btn btn-outline btn-success" value="删除" onclick="removeHosp(this)" /></div>'
                    + '</div>'
            ;
    var departmentHtml = "";
    $.ajax({
      url:'${ctx}/hosp/getHospitalDepartmentByHospId',
      type:'post',
      data:'hospId='+id,
      async : false, //默认为true 异步
      error:function(){
        alert('error');
      },
      success:function(data){
        for(var i=0;i<data.data.length;i++){
          departmentHtml += ''
                  +'<label class="col-sm-3">'
                  +'<label class="checkbox-inline">'
                  +'<input type="checkbox" name="hospId_officeCode"';
          //默认第一个科室为该医生所在医院的科室
          if(i==0){
            departmentHtml += ' checked="checked" ';
          }
          departmentHtml += ''
                  +' onchange="checkDepartment(this)"'
                  +' value="' + id+"_"+data.data[i].id + '"> ' + data.data[i].showName
                  +'</label>'
                  +'</label>'
          ;
        }
        if(departmentHtml!=""){
          departmentHtml = '<div class="form-group">'+departmentHtml+'</div>';
        }
      }
    });
    if(departmentHtml==""){
      alert("由于 "+hospName+" 没有设置科室，系统自动取消与该医院的关联");
    }else{
      $("#hospDiv").append('<div>'+hospHtml+departmentHtml+'</div>');
    }
  }

  /**
   * 删除当前行（医院信息）
   * */
  function removeHosp(removeButt){
    $(removeButt).parent().parent().parent().remove();
  }

  //关闭弹出框
  function closeModal(flag){
    $('#'+flag+"Modal").modal('hide');
  }

  /**
   * 判断医院下面的科室是否没有选中一个，若是，则提示必选，并阻止其取消选中
   * */
  function checkDepartment(department){
    var hospId_officeCode_Arr = department.value.split("_");
    var departmentListChecked = false;
    $("input[name='hospId_officeCode'][value^="+hospId_officeCode_Arr[0]+"_"+"]").each(function(){
      if(this.checked){
        departmentListChecked = true;
        return false;
      }
    });
    if(!departmentListChecked){
      department.checked = true;
      top.bootbox.dialog({
        message: "在该医院下，必须选中至少一个科室",
        buttons: {
          OK: {
            label: "确定",
            className: "btn-primary",
            callback: function () {

            }
          },
        }
      });
    }
  }

</script>
</body>
</html>
